<template>
  <main class="page-container p-20">
    <section class="page-container__ai-content">
      <Bubble.List :items="messages" />

      <section class="sender-wrap">
        <Sender />
      </section>
    </section>
  </main>
</template>

<script setup lang="ts">
import {
  // 消息气泡
  Bubble,
  // 发送框
  Sender,
} from 'ant-design-x-vue';

defineOptions({ name: 'SampleChat' });

const messages = [
  {
    content: 'Hello, Ant Design X Vue!',
    role: 'user',
  },
  {
    content: 'Hello, Ant Design X Vue!',
    role: 'user',
  },
];
</script>

<style lang="scss" scoped>
.page-container {
  height: calc(100vh - 30px);
  padding: 20px;
  box-sizing: border-box;
  .page-container__ai-content {
    width: 70%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: var(--item_bg_color);
    color: var(--item_left_text_color);
    position: relative;
    overflow-y: auto;
    padding-bottom: 96px;

    .sender-wrap {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
    }
  }
}

:deep(.ant-bubble-content),
:deep(.ant-input) {
  color: var(--item_left_text_color);
}
</style>
